<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/login.js"></script>
    <title>Login -  Orders Management Display System</title>
</head>
<body>

    <div class="container">
        <form action="" class="login-form" name="login_form" method="post">
            <h2> Orders Management Display System</h2>
            <input type="text" name="username" id="username" placeholder="User"/>
            <div class="verify-box" id="verify-box-1">*Please enter the correct format!</div>
            <input type="password" name="password" id="password" placeholder="Password" />
            <div class="verify-box" id="verify-box-2">*Please enter the correct format!</div>
            <button type="button" id="login-submit" onclick="">Login</button>
            <button type="reset" name="reset" id="reset" onclick="resetVerifyBoxes()">Reset</button>
            <button id="register" type="button" onclick="window.location.href='register.html'">Register</button>
            <p class="form-footer"><br>&copy; 2022 <b><i>Team BluePen</i></b>. All rights reserved.</p>
        </form>
        <input type="hidden" name="logo-painting" id="logo-painting" value="">
    </div>


<script type="text/javascript">
    const submitButton = document.getElementById('login-submit');
    submitButton.addEventListener("click", sendLogin)
    window.onload = function () {
        sendCurrent()
    }

    function sendCurrent() {
        const request = new XMLHttpRequest()
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode === undefined) {
                    window.location.href = "/overview.html"
                }
            } else if (request.readyState === 4 && request.status !== 200) {
                alert(request.status)
            }
        }

        request.open("POST", "/api/user/current", true)
        request.send()
    }

    function sendLogin() {
        if (!loginVerify()) {
            return
        }
        const loginRequest = new XMLHttpRequest()
        const username = document.getElementById("username").value
        const password = document.getElementById("password").value
        loginRequest.onreadystatechange = function () {
            if (loginRequest.readyState === 4 && loginRequest.status === 200) {
                const json = JSON.parse(loginRequest.responseText)
                if (json.errorCode === "00000") {
                    window.location.href = "/overview.html"
                    return
                }
                alert(json.message)
            } else if (loginRequest.readyState === 4 && loginRequest.status !== 200) {
                alert(loginRequest.status)
            }
        }

        loginRequest.open("POST", "/api/user/login", true)
        loginRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        loginRequest.send(`username=${username}&password=${password}`)
    }
</script>
</body>
</html>
